"use client"

import { useParams, useNavigate, Link } from "react-router-dom"
import { Button, Typography, Breadcrumb, Spin, Empty, Row, Col, Card, Tag } from "antd"
import { TeamOutlined, ArrowLeftOutlined, RightOutlined } from "@ant-design/icons"
import { useHosts } from "../contexts/HostsContext"
import "../styles/global.scss"
import "./DepartmentView.scss"

const { Title, Text } = Typography

const DepartmentView = () => {
  const { departmentId } = useParams<{ departmentId: string }>()
  const navigate = useNavigate()
  const { departments, projects, loading } = useHosts()

  if (!departmentId) {
    navigate("/")
    return null
  }

  const department = departments.find((d) => d.id === departmentId)
  const departmentProjects = projects.filter((p) => p.departmentId === departmentId)

  // Replace the getProjectColor function with this:
  const getDepartmentColor = () => {
    // Use a consistent color based on department code
    const colorMap: Record<string, string> = {
      IT: "bg-gradient-blue",
      HZW: "bg-gradient-purple",
      RD: "bg-gradient-green",
      Marketing: "bg-gradient-amber",
    }

    return colorMap[department.code] || "bg-gradient-cyan"
  }

  if (loading) {
    return (
      <div className="loading-container">
        <Spin size="large" />
      </div>
    )
  }

  if (!department) {
    return (
      <div className="empty-container">
        <Empty description="部门不存在或已被删除">
          <Button type="primary" onClick={() => navigate("/")}>
            返回首页
          </Button>
        </Empty>
      </div>
    )
  }

  return (
    <div className="container">
      <Breadcrumb className="breadcrumb mb-4">
        <Breadcrumb.Item>
          <Link to="/">首页</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>部门视图</Breadcrumb.Item>
        <Breadcrumb.Item>{department.name}</Breadcrumb.Item>
      </Breadcrumb>

      <div className="department-header-card mb-6">
        <div className="department-header">
          <div className="department-info">
            <div className="department-title-container">
              <div className={`department-icon circle-icon-enhanced ${getDepartmentColor()}`}>
                <TeamOutlined style={{ color: "white" }} />
              </div>
              <Title level={4} className="department-title m-0">
                {department.name}
              </Title>
            </div>
            <div className="department-meta">
              <Tag
                className="status-badge"
                style={{
                  background:
                    getDepartmentColor() === "bg-gradient-blue"
                      ? "#e0f2fe"
                      : getDepartmentColor() === "bg-gradient-purple"
                        ? "#f3e8ff"
                        : getDepartmentColor() === "bg-gradient-green"
                          ? "#dcfce7"
                          : getDepartmentColor() === "bg-gradient-amber"
                            ? "#fef3c7"
                            : "#e0f7fa",
                  color:
                    getDepartmentColor() === "bg-gradient-blue"
                      ? "#0284c7"
                      : getDepartmentColor() === "bg-gradient-purple"
                        ? "#7e22ce"
                        : getDepartmentColor() === "bg-gradient-green"
                          ? "#16a34a"
                          : getDepartmentColor() === "bg-gradient-amber"
                            ? "#d97706"
                            : "#0891b2",
                  borderRadius: "12px",
                  border: "none",
                }}
              >
                代码: {department.code}
              </Tag>
              <Text className="department-count">{departmentProjects.length} 个项目</Text>
            </div>
            {department.description && (
              <Text type="secondary" className="department-description">
                {department.description}
              </Text>
            )}
          </div>
          <Button icon={<ArrowLeftOutlined />} onClick={() => navigate("/")}>
            返回
          </Button>
        </div>
      </div>

      <div className="projects-section mb-4">
        <Title level={5} className="section-title m-0">
          项目列表
        </Title>
      </div>

      {departmentProjects.length === 0 ? (
        <div className="empty-container">
          <Empty description="暂无项目" />
        </div>
      ) : (
        <Row gutter={[16, 16]}>
          {departmentProjects.map((project) => {
            const departmentColor = getDepartmentColor()

            return (
              <Col xs={24} sm={12} md={8} lg={6} key={project.id}>
                <Card
                  className="enhanced-card fixed-height-card"
                  onClick={() => navigate(`/projects/${project.id}`)}
                  bordered={false}
                  style={{
                    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
                    transition: "all 0.3s ease",
                  }}
                  hoverable
                >
                  <div className="card-content-layout">
                    <div className="card-header">
                      <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
                        <div className={`circle-icon-enhanced ${departmentColor}`}>
                          {project.name.charAt(0).toUpperCase()}
                        </div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div className="project-title" style={{ fontWeight: 600 }}>
                            {project.name}
                          </div>
                          <div className="tag-container" style={{ marginTop: "4px" }}>
                            <Tag
                              className="status-badge"
                              style={{
                                background:
                                  departmentColor === "bg-gradient-blue"
                                    ? "#e0f2fe"
                                    : departmentColor === "bg-gradient-purple"
                                      ? "#f3e8ff"
                                      : departmentColor === "bg-gradient-green"
                                        ? "#dcfce7"
                                        : departmentColor === "bg-gradient-amber"
                                          ? "#fef3c7"
                                          : "#e0f7fa",
                                color:
                                  departmentColor === "bg-gradient-blue"
                                    ? "#0284c7"
                                    : departmentColor === "bg-gradient-purple"
                                      ? "#7e22ce"
                                      : departmentColor === "bg-gradient-green"
                                        ? "#16a34a"
                                        : departmentColor === "bg-gradient-amber"
                                          ? "#d97706"
                                          : "#0891b2",
                                borderRadius: "12px",
                                border: "none",
                              }}
                            >
                              {department.code}
                            </Tag>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="card-body">
                      {project.description && (
                        <div
                          className="project-description"
                          style={{
                            fontSize: "13px",
                            color: "rgba(0, 0, 0, 0.65)",
                            display: "-webkit-box",
                            WebkitLineClamp: 2,
                            WebkitBoxOrient: "vertical",
                            overflow: "hidden",
                            height: "40px",
                          }}
                        >
                          {project.description}
                        </div>
                      )}
                    </div>

                    <div className="card-footer">
                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <Text className="project-date" style={{ fontSize: "12px", color: "rgba(0, 0, 0, 0.45)" }}>
                          {new Date(project.createdAt).toLocaleDateString()}
                        </Text>
                        <Button
                          type="text"
                          size="small"
                          icon={<RightOutlined />}
                          onClick={(e) => {
                            e.stopPropagation()
                            navigate(`/projects/${project.id}`)
                          }}
                        >
                          查看
                        </Button>
                      </div>
                    </div>
                  </div>
                </Card>
              </Col>
            )
          })}
        </Row>
      )}
    </div>
  )
}

export default DepartmentView
